<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>预约参观 - 医学标本展览馆</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- 顶部通栏 -->
    <header class="header">
      <div class="container header-content">
        <div class="logo">
          <img
            src="https://via.placeholder.com/200x60/5a8dee/ffffff?text=医学标本展览馆"
            alt="医学标本展览馆"
            height="40"
          />
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <div class="container">
        <!-- 日期选择器 -->
        <section class="date-picker">
          <h2>选择日期</h2>
          <div class="date-scroll">
            <button class="date-item">
              <span class="weekday">今天</span>
              <span class="date">3/20</span>
            </button>
            <button class="date-item">
              <span class="weekday">明天</span>
              <span class="date">3/21</span>
            </button>
            <button class="date-item active">
              <span class="weekday">周三</span>
              <span class="date">3/22</span>
            </button>
            <button class="date-item">
              <span class="weekday">周四</span>
              <span class="date">3/23</span>
            </button>
            <button class="date-item">
              <span class="weekday">周五</span>
              <span class="date">3/24</span>
            </button>
          </div>
        </section>

        <!-- 时间段选择 -->
        <section class="time-picker">
          <h2>选择时间段</h2>
          <div class="time-grid">
            <button class="time-item">
              <span class="time">09:00-12:00</span>
              <span class="period">上午</span>
            </button>
            <button class="time-item active">
              <span class="time">13:00-17:00</span>
              <span class="period">下午</span>
            </button>
            <button class="time-item">
              <span class="time">18:00-21:00</span>
              <span class="period">晚上</span>
            </button>
          </div>
        </section>

        <!-- 人数选择 -->
        <section class="visitor-count">
          <h2>选择人数</h2>
          <div class="count-control">
            <button class="count-btn minus">
              <span class="material-icons">remove</span>
            </button>
            <input
              type="number"
              class="count-input"
              value="1"
              min="1"
              max="10"
            />
            <button class="count-btn plus">
              <span class="material-icons">add</span>
            </button>
          </div>
        </section>

        <!-- 访客信息表单 -->
        <section class="visitor-form">
          <h2>访客信息</h2>
          <form class="form">
            <div class="form-group">
              <label for="name">姓名</label>
              <input
                type="text"
                id="name"
                class="input"
                placeholder="请输入姓名"
              />
            </div>
            <div class="form-group">
              <label for="phone">手机号码</label>
              <input
                type="tel"
                id="phone"
                class="input"
                placeholder="请输入手机号码"
              />
            </div>
            <div class="form-group">
              <label for="remark">备注</label>
              <textarea
                id="remark"
                class="input"
                placeholder="请输入备注信息（选填）"
              ></textarea>
            </div>
          </form>
        </section>

        <!-- 提交按钮 -->
        <button class="submit-btn">确认预约</button>
      </div>
    </main>

    <!-- 底部导航栏 -->
    <nav class="nav-bar">
      <a href="index.html" class="nav-item">
        <span class="material-icons">home</span>
        <span>首页</span>
      </a>
      <a href="exhibition.html" class="nav-item">
        <span class="material-icons">museum</span>
        <span>展览</span>
      </a>
      <a href="booking.html" class="nav-item active">
        <span class="material-icons">event</span>
        <span>预约</span>
      </a>
      <a href="profile.html" class="nav-item">
        <span class="material-icons">person</span>
        <span>我的</span>
      </a>
    </nav>

    <style>
      /* 通用标题样式 */
      h2 {
        font-size: 18px;
        margin-bottom: var(--spacing-md);
        color: var(--text-primary);
      }

      /* 日期选择器样式 */
      .date-picker {
        margin-bottom: var(--spacing-xl);
      }

      .date-scroll {
        display: flex;
        gap: var(--spacing-md);
        overflow-x: auto;
        padding: var(--spacing-sm) 0;
        scrollbar-width: none;
      }

      .date-scroll::-webkit-scrollbar {
        display: none;
      }

      .date-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-md);
        border: 1px solid #e0e0e0;
        border-radius: var(--border-radius-md);
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .date-item.active {
        background: var(--primary-gradient);
        color: white;
        border-color: transparent;
      }

      .weekday {
        font-size: 14px;
        margin-bottom: var(--spacing-xs);
      }

      .date {
        font-size: 16px;
        font-weight: 500;
      }

      /* 时间段选择样式 */
      .time-picker {
        margin-bottom: var(--spacing-xl);
      }

      .time-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
      }

      .time-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-md);
        border: 1px solid #e0e0e0;
        border-radius: var(--border-radius-md);
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .time-item.active {
        background: var(--primary-gradient);
        color: white;
        border-color: transparent;
      }

      .time {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: var(--spacing-xs);
      }

      .period {
        font-size: 12px;
        color: var(--text-secondary);
      }

      .time-item.active .period {
        color: rgba(255, 255, 255, 0.8);
      }

      /* 人数选择样式 */
      .visitor-count {
        margin-bottom: var(--spacing-xl);
      }

      .count-control {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
      }

      .count-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .count-btn:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
      }

      .count-input {
        width: 60px;
        text-align: center;
        border: 1px solid #e0e0e0;
        border-radius: var(--border-radius-sm);
        padding: var(--spacing-sm);
      }

      /* 表单样式 */
      .visitor-form {
        margin-bottom: var(--spacing-xl);
      }

      .form-group {
        margin-bottom: var(--spacing-md);
      }

      .form-group label {
        display: block;
        margin-bottom: var(--spacing-xs);
        color: var(--text-secondary);
      }

      .form-group .input {
        width: 100%;
        padding: var(--spacing-md);
        border: 1px solid #e0e0e0;
        border-radius: var(--border-radius-sm);
        transition: all 0.3s ease;
      }

      .form-group textarea.input {
        height: 100px;
        resize: none;
      }

      .form-group .input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(90, 141, 238, 0.1);
      }

      /* 提交按钮样式 */
      .submit-btn {
        width: 100%;
        padding: var(--spacing-lg);
        background: var(--primary-gradient);
        color: white;
        border: none;
        border-radius: var(--border-radius-lg);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--hover-shadow);
      }

      .submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
        .time-grid {
          grid-template-columns: 1fr;
        }

        .date-item,
        .time-item {
          padding: var(--spacing-sm);
        }
      }

      /* 顶部通栏样式 */
      .header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: var(--spacing-md) 0;
        box-shadow: var(--card-shadow);
      }

      .header-content {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </body>
</html>
